<template>
    <div class="shop">
          <el-button size="mini" style="float:right;" type="primary" @click="searchRemoveData">搜索</el-button>
          <el-input size="mini" style="float:right;width:160px;" v-model="uid" placeholder="输入id搜索"></el-input>
          <el-input size="mini" style="float:right;width:160px;margin:0 12px;" v-model="keyword" placeholder="输入小店名称搜索"></el-input>
          <el-select v-model="deleteType" size="mini" style="float:right; width:140px;">
              <el-option label="退费移除（小店申请）" value="2"></el-option>
              <el-option label="退费移除（系统）" value="1"></el-option>
              <el-option label="强制移除（系统）" value="0"></el-option>
          </el-select>
          <span style="float:right;font-size:14px;margin-right:10px;margin-top:4px;color:#666;">移除类型:</span>
           <el-select v-model="vipShopPayType" size="mini" style="float:right; width:140px;margin-right:12px;">
              <el-option label="全部" value="3"></el-option>
              <el-option label="幕后街" value="0"></el-option>
              <el-option label="全额缴费入驻" value="1"></el-option>
              <el-option label="押金缴费入驻" value="2"></el-option>
          </el-select>
          <span style="float:right;font-size:14px;margin-right:10px;margin-top:4px;color:#666;">小店类型:</span>

      <el-table :data="tableData"
      style="width:100%;margin:60px 0 20px 0;"
      max-height="650"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="UID" prop="uid"></el-table-column>
      <el-table-column label="幕后街名称" prop="shop_name"></el-table-column>
      <el-table-column label="用户名" prop="username"></el-table-column>
      <el-table-column label="小店类型" >
          <template slot-scope="scope">
              <p v-if="scope.row.vip_shop_pay_type === 0">幕后街</p>
              <p v-if="scope.row.vip_shop_pay_type === 1">全额缴费入驻</p>
              <p v-if="scope.row.vip_shop_pay_type === 2">押金缴费入驻</p>
          </template>
      </el-table-column>
      <el-table-column label="所属区域">
          <template slot-scope="scope">
              <p v-if="scope.row.province && scope.row.city">{{scope.row.province}}.{{scope.row.city}}.{{scope.row.area}}</p>
              <p v-else>---</p>
          </template>
      </el-table-column>
      <el-table-column label="移除时间" prop="created_at"></el-table-column>
      <el-table-column label="移除类型">
          <template slot-scope="scope">
              <p v-if="scope.row.delete_type == 1">退费移除</p>
              <p v-if="scope.row.delete_type == 0">强制移除</p>
          </template>
      </el-table-column>
      <el-table-column label="退费金额">
          <template slot-scope="scope">
              <p v-if="Number(scope.row.refund_fee) ==0">0</p>
              <p v-else>¥ {{scope.row.refund_fee}}</p>
          </template>
      </el-table-column>
      </el-table>

    <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
    </div>
    </div>
</template>


<script>

import {
    shopDeleteList
} from "@/api/store";
export default {
    data () {
       return {
           shop_id: '',
           shop_name:'',
           type:'',
           page:1,
           size:15,
           tableData:[],
           total:0,
           vip_shop_pay_type:'',

           pageSize:15,
           pageNum:1,
           vipShopPayType:'',
           deleteType:'',
           uid:'',
           keyword:''
       }
    },
    created(){
      this.getshopRemoveListSearchData()
    },
    methods:{

      //搜索数据
      searchRemoveData() {
       this.getshopRemoveListSearchData()
      },
      pageChange (page){
       this.page = page
       this.getshopRemoveListSearchData()
      },

      //获取移除列表数据
      async getshopRemoveListSearchData(){
          if(this.type == 2){
              this.type = ''
          }

          if(this.vip_shop_pay_type == 3){
              this.vip_shop_pay_type = ''
          }
        //   var url  =   'type='+this.type+
        //                '&shop_id='+this.shop_id+
        //                '&shop_name='+this.shop_name+
        //                '&page='+this.page+
        //                '&size='+this.size+
        //                '&pay_type='+this.vip_shop_pay_type
          let url  =   'pageSize='+this.pageSize+
                       '&pageNum='+this.pageNum+
                       '&vipShopPayType='+this.vipShopPayType+
                       '&deleteType='+this.deleteType+
                       '&uid='+this.uid+
                       '&keyword='+this.keyword
           let data = {
            pageSize:this.pageSize,
           pageNum:this.Num,
           vipShopPayType:this.vipShopPayType,
           deleteType:this.deleteType,
           uid:this.uid,
           keyword:this.keyword
           }
       let res  = await shopDeleteList(url)
       if(res.code === 200){
          this.tableData  = res.data.list
          this.total = res.data.total
       }else{
          this.$message.error(res.message)
       }
      },
      tc () {
      return "text-align:center; color:#333333; font-size:12px;";
        },
       tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    },
}
</script>

<style lang="scss" scoped>
.shop{
    padding:20px;
    .pagination{
        float: right;
    }
}
</style>
